(function ($,ec, win, undefined) {

    var chartOption = {
        pie: {
            title: {
                show: true
            },
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            series: [
                {
                    type: "pie",
                    hoverAnimation: false,
                    center: ["50%", "50%"],
                    radius: ["85%", "95%"],
                    slient: true,
                    startAngle: 360,
                    label: {
                        normal: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    }
                }
            ]
        },
        bar: {
            title: {
                show: false
            },
            tooltip: {
                show: true
            },
            legend: {
                show: true,
                left: "7%",
                top: "3%",
                itemWidth: getSize("legendItemWidth"),
                itemHeight: getSize("legendItemHeight"),
                textStyle: {
                    fontSize: getSize("legend")
                },
                data: [
                    {
                        name: "借书人数",
                        textStyle: {
                            color: "#17e7ff"
                        }
                    }, 
                    {
                        name: "还书人数",
                        textStyle: {
                            color: "#de4a74"
                        }
                    }
                ]
            },
            grid: {
                left: getSize("grid_l"),
                right: getSize("grid_r"),
                top: getSize("grid_t"),
                bottom: getSize("grid_b")
            },
            xAxis : [
                {
                    type : "category",
                    axisLabel: {
                        color: "#fff",
                        fontFamily: "",
                        fontSize: getSize("xAxisLabel")
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#498bfa"
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#1d40ab"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type : "value",
                    axisLabel: {
                        color: "#fff",
                        fontFamily: "",
                        fontSize: getSize("yAxisLabel")
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#498bfa"
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#1d40ab"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#1a3aad"
                        }
                    }
                }
            ],
            series : [
                {
                    name: "借书人数",
                    type: "bar",
                    barWidth: "36%",
                    itemStyle: {
                        normal: {
                            barBorderRadius: [8, 8, 0 ,0],
                             color: new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [
                                    {offset: 0, color: "#0084df"},
                                    {offset: 1, color: "#17e7ff"}

                                ]
                            )
                        }
                    },
                    data:[10, 52, 200, 334, 390, 330, 220]
                },
                {
                    name: "还书人数",
                    type: "line",
                    smooth: true,
                    showAllSymbol: true,
                    symbol: "emptyCircle",
                    symbolSize: getSize("symbolSize")
                }
            ]
        }
    };

    var pieChartBorrow = ec.init(document.getElementById("totalStatisticsChartBorrow"));
	pieChartBorrow.clear();
    pieChartBorrow.setOption($.extend(true, {}, chartOption.pie, {
        series:[
            {
                name: "今日借书人数",
                label: {
                    normal: {
                        formatter: function () {
                            return "今日借书人数\r\n26,666人";
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        label: {show:false},
                        labelLine: {show:false}
                    }
                },
                data:[
                     {
                        value: 30000,
                        name: "借书人数",
                        itemStyle:{
                            normal:{
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: "#d28df7"},
                                    {offset: 1, color: "#f2ea6d"}
                                ]),
                                shadowBlur: 28,
                                shadowColor: "rgba(255, 199, 219, 0.4)"
                            }
                        }
                    },
                    {
                        value: 6235,
                        name: "借书人数",
                        itemStyle: {
                            normal : {
                                color: "rgba(14,3,107,1)"
                            }
                        }
                    }
                ]
            }
        ]
    }));

    var pieChartReturn= ec.init(document.getElementById("totalStatisticsChartReturn"));
    pieChartReturn.clear();
    pieChartReturn.setOption($.extend(true, {}, chartOption.pie, {
        series: [
            {
                name: "今日还书人数",
                label: {
                    normal: {
                        formatter: function () {
                            return "今日还书人数\r\n826,666人";
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        label: {show:false},
                        labelLine: {show:false}
                    }
                },
                data:[
                     {
                        value: 30000,
                        name: "还书人数",
                        itemStyle:{
                            normal:{
                                color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [
                                    {offset: 0, color: "#7de26c"},
                                    {offset: 1, color: "#1de8fb"}
                                ]),
                                shadowBlur: 28,
                                shadowColor: "rgba(81, 224, 255, 0.4)"
                            }
                        }
                    }
                ]
            }
        ]
    }));
    setTimeout (function () {
        pieChartReturn.setOption({
            series: [
                {},{
                    type: "pie",
                    hoverAnimation: false,
                    center: ["50%", "50%"],
                    radius: ["85%", "95%"],
                    slient: true,
                    startAngle: 360,
                    itemStyle: {
                        normal: {
                            label: {show:false},
                            labelLine: {show:false}
                        }
                    },
                    data:[
                         {
                            value: 4000,
                            name: "超出人数",
                            itemStyle:{
                                normal:{
                                    color: new echarts.graphic.LinearGradient(0.9, 0, 0.3, 0.3, [
                                        {offset: 0, color: "#61c9a9"},
                                        {offset: 0.6, color: "#fff"}
                                    ]),
                                    shadowBlur: 28,
                                    shadowColor: "rgba(101, 81, 255, 0.5)"
                                }
                            }
                        },
                        {
                            value: 30000,
                            name: "超出人数",
                            itemStyle: {
                                normal : {
                                    color: "rgba(14,3,107,0)",
                                    opacity: 0
                                }
                            }
                        }
                    ]
                }
            ]
        });

    }, 2000);

    var barChart = ec.init(document.getElementById("ywdStatisticsChart"));
    var types = ["day", "week", "year"];
    var interval = null;
    var currentType = types[0];

    setBar(currentType);
    setMyInterval();

    // 添加click事件，手动触发年周日切换
    $("[data-chart]").on("click", function () {
        var $this = $(this);
        if ($this.is(".active")) return;

        currentType = $this.attr("data-chart");
        changeBtnState($this);
        setBar(currentType);
        setMyInterval();
    });


    // 更换按钮状态
    function changeBtnState(btn) {
    	btn.siblings(".active").removeClass("active");
        btn.addClass("active");	 		
    }


    // 添加定时器，轮播年周日图表
    function setMyInterval() {
        if (interval != null) {
            clearInterval(interval);
            interval = null;
        }
        interval = setInterval(function () {
            var index = $.inArray(currentType, types);
            if (index < types.length - 1) {
                currentType = types[++index]
            } else {
                currentType = types[0];
            }
            changeBtnState($("[data-chart='"+ currentType +"']"));
            setBar(currentType);
        }, 10000);
    }

    // 设置年周日图表
    function setBar(type, option) {
        barChart.clear();
        switch (type) {
            case "day":
                option = $.extend(true, {}, chartOption.bar, option || {
                    xAxis: [
                        {
                            data : ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
                        }
                    ],
                    series: [
                        {
                            data: [1120, 1000, 5500, 2500, 2500, 4000, 0, 0, 3000]
                        },
                        {
                            data: [5620, 12000, 6650, 6000, 2600, 5000, 6000, 7020, 3800]
                        }
                    ]
                });
                break;
            case "week":
                option = $.extend(true, {}, chartOption.bar, option || {
                        xAxis: [
                            {
                                data : ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
                            }
                        ],
                        series: [
                            {
                                data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
                            },
                            {
                                data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
                            }
                        ]
                    });
                break;
            case "year":
                option = $.extend(true, {}, chartOption.bar, option || {
                        xAxis: [
                            {
                                data : ["2011", "2012", "2013", "2014", "2015", "2016", "2017"]
                            }
                        ],
                        series: [
                            {
                                data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
                            },
                            {
                                data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
                            }
                        ]
                    });
                break;
        }
        barChart.setOption(option);
    }

    var timeout = null;
    win.onresize = function () {
        if (!timeout) {
            clearTimeout(timeout);
            timeout = null;
        };
        timeout = setTimeout(setChartSize, 300);
    };
    function setChartSize() {
        barChart.resize();
        var o = {
            xAxis: [{
                axisLabel: {
                    fontSize: getSize("xAxisLabel")
                }
            }],
            yAxis: [{
                axisLabel: {
                    fontSize: getSize("yAxisLabel")
                }
            }],
            grid: {
                left: getSize("grid_l"),
                right: getSize("grid_r"),
                top: getSize("grid_t"),
                bottom: getSize("grid_b")
            },
            legend: {
                itemWidth: getSize("legendItemWidth"),
                itemHeight: getSize("legendItemHeight"),
                textStyle: {
                    fontSize: getSize("legend")
                }
            },
            series: [
                {},{
                    symbolSize: getSize("symbolSize")
                }
            ]
        };
        $.extend(true, chartOption.bar, o);
        barChart.setOption(o);
        pieChartBorrow.resize();
        pieChartReturn.resize();
    }

    function getSize(type) {
        var size = parseFloat(document.documentElement.style.fontSize);
        if (!size) return;
        var per = 0;

        switch (type) {
            case "legend":
            case "xAxisLabel":
            case "yAxisLabel":
                per = (14.33/0.75)/91;
                break;  
            case "grid_t":
                per = 60 / 91;    
                break;
            case "grid_b":
                per = 56 / 91;
                break;
            case "grid_l":
                per =  804 * 0.15 / 91; 
                break;
            case "grid_r":
                per = 804 * 0.07 / 91;
                break;
            case "symbolSize":
                per = 15 / 91;
                break;
            case "legendItemWidth":
                per = 32 / 91;
                break;
            case "legendItemHeight": 
                per = 20 / 91;
                break;
        }
        size = size * per;
        return size;    
    }
    
})(jQuery, echarts, window);
